<template>
  <div class="register">
    <p><input type="text" maxlength="11" v-model="usr.phoneNumber" placeholder="请输入手机号码"></p>
    <p><input type="text" maxlength="6" v-model="usr.yzm" placeholder="请输入短信验证码"></p>
    <p><input type="password" maxlength="12" v-model="usr.password" placeholder="请输入6-12位密码"></p>
    <div class="yarn">
      <input type="checkbox" v-model="sure" class="bingo">
      <span style="color: #555;margin-left: 2vw;">我已经阅读并同意</span>
      <span style="color: dodgerblue">《商城销售合同》</span>
    </div>
    <button class="submit">注册</button>
    <span class="code"   @click="getValidCode"><Button>获取验证码</Button></span>
  </div>
</template>
<script>
import $ from 'jquery';

export default {
  name: 'register',
  data() {
    return {
      usr: {
        phoneNumber: '',
        yzm: '',
        msg: '',
        code: '',
        password: '',
      },
      sure: false,
    };
  },
  methods: {
    getValidCode() {
      this.$http.validCode(this.usr)
        .then((res) => {
          this.usr.yzm = res.data.data;
          this.usr.msg = res.data.msg;
          this.usr.code = res.data.code;
          console.log(this.usr.yzm);
          if (this.usr.code === 1002) {
            /* eslint-disable no-console */
            console.log(res.data.msg);
            this.$Message.success({
              content: this.usr.yzm,
              duration: 3,
            });
          }
          // if (res.data.data.code = 1002) {
          //   this.$notice({
          //     message: '验证码发送成功,注意查收!',
          //     timout: 300,
          //     type: 'success',
          //   });
          // }
          // if (res.data.data.code = 1003) {
          //   this.$notice({
          //     message: '参数不合法!',
          //     timout: 400,
          //     type: 'error',
          //   });
          // }
        })
        .catch(err => console.log(err));
    },
    // phone() {
    //   const age = /^1[35-9][0-9]{9}$/;
    //   if (age.test(this.usr.phoneNumber)) {
    //     if (this.usr.yzm) {
    //
    //     }
    //   }
    // },
  },
  mounted() {

  },
  updated() {
    const telReg = /^1[35-9][0-9]{9}$/;
    const $dom = $('.submit');
    if (telReg.test(this.usr.phoneNumber) && this.usr.yzm.length >= 4 &&
      this.usr.password.length >= 6 && this.sure === true) {
      $dom.css({ background: 'dodgerblue' });
    }
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;}
  .register{
    margin-top: 50px;
    width: 100vw;
    position: absolute;
  }
  .register input{
    margin-top: 1px;
    display: inline-block;
    text-indent: 14px;
    width: 100%;
    line-height: 50px;
    border: none;
    outline: none;
    color: black;
    font-size: 14px;
    font-family: '黑体';
  }
  .yarn{
    margin-top: 30px;
    font-size: 0;
  }
  .yarn span{
    display: inline-block;
    font-size: 13px;
    cursor:pointer;
  }
  .yarn .bingo{
    width: 15px;
    height: 15px;
    background: url("./img/success.png") no-repeat;
    background-size: 100%;
    vertical-align: -2px;
    margin-left: 3vw;
  }
  .yarn span.bingos{
    width: 15px;
    height: 15px;
    background: url("./img/success2.png") no-repeat;
    background-size: 100%;
    vertical-align: -2px;
    margin-left: 3vw;
  }
  .register>button{
    border: none;
    width: 70vw;
    line-height: 50px;
    display: block;
    margin: 60px auto;
    color: #fff;
    letter-spacing: 3px;
    border-radius: 30px;
    outline: none;
    font-size: 20px;
  }
  .code {
    position: absolute;
    left: 80vw;
    top: 17.5vw;
    font-size: 12px;
    color: dodgerblue;
  }
</style>
